<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false"
             v-dialogDrag>

    <div style="margin-left: 10px;width: 90%;"  id="printable-table">
    <div v-for="(item,index1) in splitList" :key="index1" style="height:auto;">
      <div style="width: 100%;font-size: 15px;font-weight: bold;text-align: center;">山东鲁能光大电力器材有限公司</div>
      <div style="width: 100%;font-size: 13px;font-weight: bold;text-align: center;">发货单</div>
      <div class="table-header">
        <div class="table-tr">
          <div class="table-td3">发货日期：{{ fahuo.fahuoDate }}</div>
          <div class="table-td3">发货单号：{{ fahuo.nos }}</div>
          <div class="table-td3" style="height: auto !important;">订单号：{{ fahuo.projectNos }}</div>
        </div>
        <div class="table-tr">
          <div class="table-td2" style="width: 70%;">客户名称：{{ fahuo.kehuName }}</div>
          <div class="table-td2" style="width: 30%;">业务员：{{ fahuo.saleman}}</div>
        </div>
      </div>

      <el-form ref="form" :rules="rules" label-width="120px">
        <el-table border v-loading="loading" :data="item" border ref="table"  style="width: 100%; border:0.5px solid black; border-color:black;color: black;" :cell-style="tableCellStyle"
                  :row-style="{ height: '20px !important' }"
                  :header-cell-style="tableHeaderCellStyle"
        size="mini" :max-height="tableMaxHeight" show-summary :summary-method="getSummaries">
          <el-table-column label="序号"  type="index" width="50" align="center" :index="index => (index + 1) + index1 * 6"></el-table-column>
          <el-table-column label="产品编号" align="center" prop="nos" width="100"  show-overflow-tooltip/>
          <el-table-column label="工程名称" align="center"  prop="params.gongchengName" show-overflow-tooltip>
            <template slot-scope="scope">
              <div :style="scope.row.params.gongchengNameSize">{{ scope.row.params.gongchengName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" prop="name" show-overflow-tooltip>
            <template slot-scope="scope">
              <div :style="scope.row.nameSize">{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="产品型号" align="center" prop="models" show-overflow-tooltip>
            <template slot-scope="scope">
              <div :style="scope.row.modelsSize">{{ scope.row.models }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center" prop="danwei" width="50"/>
          <el-table-column label="发货数量" align="center" prop="shuliang" width="80"/>
          <el-table-column label="备注" align="center" prop="remark" width="80"/>
        </el-table>
      </el-form>
      <div class="table-header">
        <div class="table-tr">
          <div class="table-td2">总合计（小写）：</div>
          <div class="table-td2">总合计（大写）：</div>
        </div>
        <div class="table-tr">
          <div class="table-td5">白联：存根</div>
          <div class="table-td5">红联：随货同行</div>
          <div class="table-td5">黄联：仓库发货</div>
          <div class="table-td5">蓝联：门卫</div>
          <div class="table-td5">绿联：发货签收</div>
        </div>

      </div>
    </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handlePrint" icon="el-icon-printer" type="primary">打 印</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getAction, addAction, getById, accMul, accAdd} from '@/api/manage'

export default {
  name: "YiFahuoList",
  dicts: ['yifahuo_status'],
  components: {},
  data() {
    return {
      title: "发货单",
      open: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      rows: [],
      rules: {},
      fahuo: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalMoney: 0,
      // 销售信息管理表格数据
      dataList: [],
      columns: [],
      splitList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20000,
        tongzhiId: null,
        tongzhiNo: null,
        jiaohuoDate: null,
        caigouNo: null,
        gonghuoNo: null,
        proId: null,
        proNo: null,
        prodName: null,
        saleId: null,
        name: null,
        models: null,
        mingxi: null,
        nos: null,
        danwei: null,
        danjian: null,
        shuliang: null,
        money: null,
        status: null,
        fahuoId: null,
        fahuoNo: null,
        params: {},
      },
      url: {
        listMerge: '/lvYifahuomingxi/lvYifahuomingxi/listMerge',
      },
      tableMaxHeight: window.innerHeight - 320,
    };
  },
  created() {
    window.addEventListener('resize', this.getTableHeight);
  },
  destroyed() {
    window.removeEventListener('resize', this.getTableHeight);
  },
  methods: {
    // 修改 table cell边框的背景色，行高，字体大小
    tableCellStyle() {
            return 'border-color: black;color: black;'
        },
        // 修改 table header cell的背景色，行高，字体大小
    tableHeaderCellStyle() {
        return 'border-color: black; color: black; background:#FFFFFF;'
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    getTableHeight() {
      this.tableHeight = window.innerHeight - 320
    },
    showMingxi(row) {
      this.fahuo = row;
      this.queryParams.fahuoId = row.id;
      this.open = true;
      this.getList();
    },
    /** 查询销售信息管理列表 */
    getList() {
      let that = this;
      that.loading = true;
      getAction(that.url.listMerge, that.queryParams).then(response => {
        that.columns = response.rows;
        let totalMoney = 0;
        that.columns.forEach(item => {
          if(item.params.gongchengName && item.params.gongchengName.length > 30) {
            item.params.gongchengNameSize = 'font-size: 10px'
          } else {
            item.params.gongchengNameSize = 'font-size: 14px'
          }
          if (item.name && item.name.length > 30) {
            item.nameSize = 'font-size: 10px'
          }else {
            item.nameSize = 'font-size: 14px'
          }
          if (item.models && item.models.length > 30) {
            item.modelsSize = 'font-size: 10px'
          }else {
            item.modelsSize = 'font-size: 14px'
          }
        });
        for (const item in that.columns) {
          that.columns[item].total = accMul(that.columns[item].danjian, that.columns[item].shuliang);
          totalMoney = accAdd(totalMoney, that.columns[item].total);
        }
        that.splitList = this.splitIntoChunks(that.columns, 6);
        that.totalMoney = totalMoney;
        that.total = response.total;
        that.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    handlePrint() {
      // window.print();
      let id = "printable-table";
      let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
      // 定义element-ui table组件的样式
      // box-sizing:border-box;
      //display:table-cell!important;
      const tabStyle =
        `<style>
      table{width:100%;}
      .el-table__body-wrapper{ max-height:none !important;box-sizing:border-box;}
      .el-table{ max-height:none !important;}
      .el-table__header,.el-table__body,.el-table__footer{ table-layout:fixed!important; width:100%!important;border-collapse: collapse;text-align:center;}
      table,table tr th, table tr td {border:0.5px solid black;color:black;word-wrap:break-word;}
      .el-table__header { border-collapse: collapse !important;}
      table tr th,table tr td{ padding:0.1mm 0mm;word-wrap:break-word; }
      .el-table__body, tr td .cell{width:100%!important;}
      .el-table th.gutter{display: none;}
      .el-table colgroup.gutter{display: none;}
      .el-table tr{
        height: 15px !important;
        font-size:16px !important;
      }

      .el-table--enable-row-transition{
        border: 0px solid black !important;
      }

      .el-table__header{ border-collapse: inherit;}
       @media print{
       table{page-break-after: auto;}
       tr{page-break-inside: avoid; page-break-after: auto;}
       td{page-break-inside: avoid; page-break-after: auto;}
       thead{display: table-header-group;}
       tfoot{display: table-footer-group;}
       }
      // --------------------隐藏table gutter列和内容区右侧的空白 start
      .el-table th.gutter{
        display: none;
        width:0
      }
      .el-table colgroup col[name='gutter']{
        display: none;
        width: 0;
      }
      .el-table__body{
        width: 100% !important;
      }
      .table-header{
        width: 95% !important;
        margin: 0 auto;
      }
      .table-tr{
      width: 100% !important;
      display: flex;
      }
      .table-td3{
        width:33%;
        word-wrap: break-word;
        height: 20px;
        font-size:14px !important;
      }
      .table-td2{
        width:50%;
        height: 20px;
        line-height: 20px;
        font-size:14px !important;
      }

      .table-td5{
        width:20%;
        height: 20px;
        line-height: 20px;
        font-size:14px !important;
      }


      </style>`;
      let content = "";
      // 获取名为传入id的 dom元素内的内容
      let str = document.getElementById(id).innerHTML;

      // 拼接空页面+style样式+dom内容
      content = content + str;

      printStr = printStr + '<body><div id="ceshi" style="height:atuo;">' + content + "</div></body>" + tabStyle + "</html>";
      // 打开新页面
      let pwin = window.open("_blank");
      // 将内容赋值到新页面
      pwin.document.write(printStr);
      // document.getElementsByTagName('body')[0].style.zoom = 0.75
      pwin.document.close();
      // 聚焦-不加focuse，在某些情况下，打印页面会有问题。
      pwin.focus();
      // 使用setTimeout，等页面dom元素渲染完成后再打印。
      setTimeout(() => {
        pwin.print(); // 打印功能。 例如 window.print() 直接打印当前整个页面。
        // document.getElementsByTagName('body')[0].style.zoom = 1;
        pwin.close(); // 关闭 打印创建的当前页面
      }, 500);

    },

    getSummaries(param) {
      // console.log(param);
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // 只合计amount1和amount3，想合并哪些列就在这里指定
        if ( column.property === "shuliang" || column.property === "total") {

          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return accAdd(prev , curr);
            } else {
              return prev;
            }
          }, 0);
        }
      });
      return sums;
    },

    // 小写转为大写
    convertCurrency(money) {
      var cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
      var cnIntRadice = ['', '拾', '佰', '仟']
      var cnIntUnits = ['', '万', '亿', '兆']
      var cnDecUnits = ['角', '分', '毫', '厘']
      // var cnInteger = '整'
      var cnIntLast = '元'
      var maxNum = 999999999999999.9999
      var integerNum
      var decimalNum
      var chineseStr = ''
      var parts
      if (money === '') {
        return ''
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        return ''
      }
      if (money === 0) {
        // chineseStr = cnNums[0] + cnIntLast + cnInteger
        chineseStr = cnNums[0] + cnIntLast
        return chineseStr
      }
      money = money.toString()
      if (money.indexOf('.') === -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 4)
      }
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0
        var IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          var p = IntLen - i - 1
          var q = p / 4
          var m = p % 4
          if (n === '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m === 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      if (decimalNum !== '') {
        var decLen = decimalNum.length
        for (i = 0; i < decLen; i++) {
          n = decimalNum.substr(i, 1)
          if (n !== '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr === '') {
        // chineseStr += cnNums[0] + cnIntLast + cnInteger
        chineseStr += cnNums[0] + cnIntLast
      }
      // else if (decimalNum === '') {
      //   chineseStr += cnInteger
      // }
      return chineseStr
    },

    // 只能输入两位小数
    inputNumber(e, name) {
      //正则表达试
      e = e
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        .replace(/^\./g, '') // 保证第一个为数字而不是.
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      if (e.indexOf('.') < 0 && e !== '') {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        e = parseFloat(e) + ''
      } else if (e.indexOf('.') >= 0) {
        e = e.replace(/^()*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      }
      this.formData[name] = e
      this.formData.jkjes = this.convertCurrency(e)
    },


     splitIntoChunks(arr, chunkSize) {
        return Array.from({ length: Math.ceil(arr.length / chunkSize) }, (v, i) => arr.slice(i * chunkSize, i * chunkSize + chunkSize));
      },











  }
};
</script>

<style scoped>

.table-header {
  width: 90% !important;
  margin: 0 auto;
}

.table-tr {
  width: 100% !important;
  height: 30px;
  display: flex;
}

.table-td3 {
  width: 33%;
  word-wrap: break-word;
  height: auto;
}

.table-td2 {
  width: 50%;
  line-height: 30px;
}

.table-td5 {
  width: 20%;
  line-height: 30px;
}


::v-deep .el-table__footer {
  td{
    color:black !important;
    border-color: black !important;
    text-align: center;
    background-color: #fff !important;
  }
}



</style>
